<template>
  <div class="cateAdd">
    <el-form :rules="rules" ref="itemAdd" :model="form" label-width="120px">
        <el-form-item label="商品名" prop="itemName">
          <el-input v-model="form.itemName" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number :min="0" v-model="form.price" />
        </el-form-item>
        <el-form-item label="上下架" prop="onsale">
          <el-switch v-model="form.onsale" inline-prompt
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="上架" inactive-text="下架" />
        </el-form-item>
        <el-form-item label="所属分类" prop="cateId">
          <el-cascader v-model="form.cateId" :options="cateList" :props="cascaderProps" clearable />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="form.desc" type="textarea"/>
        </el-form-item>
        <el-form-item label="商品封面">
          <el-upload action="/api/upload" name="file" accept="image/*" :on-success="uploadSuccess"
            :before-upload="beforeUpload">
            <el-button>上传</el-button>
          </el-upload>
          <el-image style="width: 100px" :src="form.thumb" :preview-src-list="[form.thumb]" />
        </el-form-item>
        <el-form-item label="商品详情">
          <div style="border: 1px solid #ddd">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              mode="default"
          />
          <Editor
              style="height: 500px; overflow-y: hidden;"
              v-model="form.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
          />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
  </template>

<script>
import { listCate } from '@/api/cateList/cateList.js'
import { updateItem, getItemDetail } from '@/api/itemList/itemList'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: 'ItemAdd',
  data () {
    return {
      // 表单参数
      form: {},
      cateList: [],
      cascaderProps: {
        emitPath: false,
        checkStrictly: true,
        value: 'id',
        label: 'cateName'
      },
      // 富文本相关配置
      editor: null,
      // 富文本工具栏配置
      toolbarConfig: {},
      // 富文本主体配置
      editorConfig: {
        placeholder: '请输入内容',
        MENU_CONF: {
          // 配置富文本 上传图片配置
          uploadImage: {
            server: '/api/upload',
            fieldName: 'file',
            customInsert: (res, insertFn) => {
              /*
                 res 上传接口返回数据
                 insertFn(url, alt, href)
                  url 回显图片的地址
                */
              insertFn(res.data.url)
            }
          }
        }
      },
      rules: {
        itemName: [
          {
            required: true,
            message: '商品名必填'
          }
        ],
        price: [
          {
            required: true,
            message: '价格必填'
          }
        ],
        cateId: [
          {
            required: true,
            message: '分类必选'
          }
        ]
      }
    }
  },

  created () {
    this.getCateList()
    this.getDetail()
  },

  components: {
    Editor,
    Toolbar
  },

  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },

    getDetail () {
      getItemDetail({
        id: this.$route.query.id
      }).then(res => {
        if (res.data.code === 200) {
          this.form = res.data.data
        }
      })
    },

    /** 获取商品分类列表数据 */
    getCateList () {
      listCate().then(res => {
        if (res.data.code === 200) {
          this.cateList = res.data.data.lists
          // this.total = res.data.data.total
        }
      })
    },

    beforeUpload (file) {
      // 上传之前 限制 文件大小 体积不能超过 1m
      if (file.size > 1024 * 1024) {
        this.$message({
          type: 'error',
          message: '图片体积不能超出1m'
        })
        return false
      } else {
        return true
      }
    },
    uploadSuccess (res) {
      // 上传成功
      if (res.code === 200) {
        this.form.thumb = res.data.url
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      }
    },

    submitForm () {
      this.$refs.itemAdd.validate().then(res => {
        updateItem(this.form).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1000,
              onClose: () => {
                // 新增成功去商品列表页
                this.$router.replace('/itemList')
              }
            })
          }
        })
      }).catch(() => {
        alert('验证失败')
      })
    },

    cancel () {
      this.reset()
    },

    // 表单重置
    reset () {
      this.form = {
        itemName: '',
        price: 0,
        onsale: true,
        desc: '',
        thumb: '',
        cateId: -1,
        content: ''
      }
    }

  }
}

</script>

  <style lang="scss" scoped>
  .cateAdd{
    max-width: 600px;
  }
  </style>
